<div class="page-header position-relative">
    <h1>
        Treeview
        <small>
            <i class="icon-double-angle-right"></i>
            with selectable items(single &amp; multiple) and custom icons
        </small>
    </h1>
</div>


<div class="row-fluid">
    <!--PAGE CONTENT BEGINS HERE-->

    <div class="widget-box span6">
        <div class="widget-header header-color-blue2">
            <h4 class="lighter smaller">Choose Categories</h4>
        </div>

        <div class="widget-body">
            <div class="widget-main padding-8">
                <div id="tree1" class="tree tree-selectable">
                    <div class="tree-folder" style="display:none;">
                        <div class="tree-folder-header"><i class="icon-plus"></i>

                            <div class="tree-folder-name"></div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;"></div>
                    </div>
                    <div class="tree-item" style="display:none;"><i class="icon-remove"></i>

                        <div class="tree-item-name"></div>
                    </div>
                    <div class="tree-folder" style="display: block;">
                        <div class="tree-folder-header"><i class="icon-plus"></i>

                            <div class="tree-folder-name">For Sale</div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;">
                            <div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>
                        </div>
                    </div>
                    <div class="tree-folder" style="display: block;">
                        <div class="tree-folder-header"><i class="icon-plus"></i>

                            <div class="tree-folder-name">Vehicles</div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;">
                            <div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>
                        </div>
                    </div>
                    <div class="tree-folder" style="display: block;">
                        <div class="tree-folder-header"><i class="icon-plus"></i>

                            <div class="tree-folder-name">Rentals</div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;">
                            <div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>
                        </div>
                    </div>
                    <div class="tree-folder" style="display: block;">
                        <div class="tree-folder-header"><i class="icon-plus"></i>

                            <div class="tree-folder-name">Real Estate</div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;">
                            <div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>
                        </div>
                    </div>
                    <div class="tree-folder" style="display: block;">
                        <div class="tree-folder-header"><i class="icon-plus"></i>

                            <div class="tree-folder-name">Pets</div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;">
                            <div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>
                        </div>
                    </div>
                    <div class="tree-item" style="display: block;"><i class="icon-remove"></i>

                        <div class="tree-item-name">Tickets</div>
                    </div>
                    <div class="tree-item" style="display: block;"><i class="icon-remove"></i>

                        <div class="tree-item-name">Services</div>
                    </div>
                    <div class="tree-item" style="display: block;"><i class="icon-remove"></i>

                        <div class="tree-item-name">Personals</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="widget-box span6">
        <div class="widget-header header-color-green2">
            <h4 class="lighter smaller">Browse Files</h4>
        </div>

        <div class="widget-body">
            <div class="widget-main padding-8">
                <div id="tree2" class="tree tree-unselectable">
                    <div class="tree-folder" style="display:none;">
                        <div class="tree-folder-header"><i class="icon-folder-close"></i>

                            <div class="tree-folder-name"></div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;"></div>
                    </div>
                    <div class="tree-item" style="display:none;">
                        <div class="tree-item-name"></div>
                    </div>
                    <div class="tree-folder" style="display: block;">
                        <div class="tree-folder-header"><i class="icon-folder-close"></i>

                            <div class="tree-folder-name">Pictures</div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;">
                            <div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>
                        </div>
                    </div>
                    <div class="tree-folder" style="display: block;">
                        <div class="tree-folder-header"><i class="icon-folder-close"></i>

                            <div class="tree-folder-name">Music</div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;">
                            <div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>
                        </div>
                    </div>
                    <div class="tree-folder" style="display: block;">
                        <div class="tree-folder-header"><i class="icon-folder-close"></i>

                            <div class="tree-folder-name">Video</div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;">
                            <div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>
                        </div>
                    </div>
                    <div class="tree-folder" style="display: block;">
                        <div class="tree-folder-header"><i class="icon-folder-close"></i>

                            <div class="tree-folder-name">Documents</div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;">
                            <div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>
                        </div>
                    </div>
                    <div class="tree-folder" style="display: block;">
                        <div class="tree-folder-header"><i class="icon-folder-close"></i>

                            <div class="tree-folder-name">Backup</div>
                        </div>
                        <div class="tree-folder-content"></div>
                        <div class="tree-loader" style="display: none;">
                            <div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>
                        </div>
                    </div>
                    <div class="tree-item" style="display: block;">
                        <div class="tree-item-name"><img src="assets/icons/txt.png"> ReadMe.txt</div>
                    </div>
                    <div class="tree-item" style="display: block;">
                        <div class="tree-item-name"><img src="assets/icons/html.png"> Manual.html</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var $assets = "assets";//this will be used in fuelux.tree-sampledata.js
    </script>

    <!--PAGE CONTENT ENDS HERE-->
</div>
<script>

    $(function(){

        $('#tree1').ace_tree({
            dataSource: treeDataSource ,
            multiSelect:true,
            loadingHTML:'<div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>',
            'open-icon' : 'icon-minus',
            'close-icon' : 'icon-plus',
            'selectable' : true,
            'selected-icon' : 'icon-ok',
            'unselected-icon' : 'icon-remove'
        });

        $('#tree2').ace_tree({
            dataSource: treeDataSource2 ,
            loadingHTML:'<div class="offset1"><i class="icon-refresh icon-spin blue"></i></div>',
            'open-icon' : 'icon-folder-open',
            'close-icon' : 'icon-folder-close',
            'selectable' : false,
            'selected-icon' : null,
            'unselected-icon' : null
        });
    });
</script>